Skip to content

fix(web): combobox search input fills its popup - #24312

Closed
bryanprimus wants to merge 1 commit into
pingdotgg:mainfrom
bryanprimus:fix/combobox-search-input-width
Closed

bryanprimus wants to merge 1 commit into
pingdotgg:mainfrom
bryanprimus:fix/combobox-search-input-width

Conversation

@bryanprimus

Copy link
Copy Markdown
Contributor

Problem

Combobox search boxes don't fill their popup. The field is sized by the browser's default 20 character input width, so a long placeholder is cut off while the rest of the popup is empty. The reviewer picker shows it on macOS: "Search people with access" stops at "Search people with acce" in a 288px popup.

Cause

ComboboxSearchInput renders ComboboxInput with unstyled. In that mode Input drops its control classes, including inline-flex w-full, so the control <span> is a plain inline element. ComboboxInput's outer div has not-has-[>*.w-full]:w-fit, so with no w-full child it shrinks to fit, and the <input> falls back to its intrinsic size=20 width instead of the popup's.

Fix

ComboboxSearchInput passes flex w-full to the input control. The wrapper then sees a w-full child and the field spans the popup, matching the underline that already does. This is a one line change in apps/web/src/components/ui/combobox.tsx, and it applies to every ComboboxSearchInput (pull request reviewer and label pickers, branches, model picker, font family, diff panel, sidebar, settings scope, code block language, draft headline). The others have short placeholders, so the cut never showed there.

This is meant as a small fix for an obvious bug, which CONTRIBUTING.md allows without a prior issue. It doesn't change behavior; it only gives the search field the width its popup and underline already have.

Evidence

Reported on macOS, in the reviewer picker:

before on macOS

Reproduced by rendering the real PullRequestCandidatePicker with the app stylesheet in the web Vitest browser project (Chromium, dark theme). Linux's fallback for --font-sans is narrow enough that the placeholder happens to fit, so the capture set --font-sans to DejaVu Sans, a wider face closer to the macOS metrics:

Before After
before after

Measured widths in the same 288px popup:

Input width Placeholder fits
Before, default font 247px (its 20 character default) yes, by chance
Before, DejaVu Sans 203px no, cut at "acces"
After, either font 262px (fills the popup) yes

vp run check:changed: format, lint, knip and typecheck pass.

Not checked: the desktop app, and the other pickers individually (same component, so they share the fix). Mobile is React Native and doesn't use this component. The capture test was a throwaway and isn't committed.

Made with Claude Code (Claude Opus 5.5).

🤖 Generated with Claude Code

https://claude.ai/code/session_01PMd8XS3ByLNi5G9PaNeJo4

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Oct 24, 2026
@macroscopeapp

macroscopeapp Bot commented Oct 24, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at f87fa37

Macroscope's review found this PR approvable — This one-line UI fix makes existing combobox search inputs fill their popup instead of shrinking to intrinsic input width. It is a self-contained layout change with no schema, infrastructure, security, or static-analysis impact.

You can add or adjust custom eligibility rules. Learn more.

@coderabbitai

coderabbitai Bot commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration
Commits

Reviewing files that changed from the base of the PR and between f87fa37 and 4f3168e.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between 26c3625 and f87fa37.

Files selected for processing: 1
  • apps/web/src/components/ui/combobox.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The combobox search input now uses flex w-full classes. Its existing height, padding, font, and line-height classes remain unchanged.

Changes: Combobox input sizing

Layer / File(s) Summary
Search input sizing
apps/web/src/components/ui/combobox.tsx
ComboboxSearchInput adds flex w-full to the input class list.

Priority: Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Bug fix

Possibly related PRs

  • pingdotgg/t3code#23924: Adds searchable pull-request filters and a separate MenuSearchInput modeled on ComboboxSearchInput.

Suggested reviewers: flamboh

Merge Risk: Minimal · up to f87fa

The localized sizing change addresses placeholder truncation with no identified adverse behavior.

Pre-merge checks: Passed 4
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: making the web combobox search input fill its popup.
Description check Passed The description explains the problem, cause, fix, scope, verification results, visual evidence, and unchecked areas. It uses different headings from the template, but it provides the required informat…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, cause, fix, scope, verification results, visual evidence, and unchecked areas. It uses different headings from the template, but it provides the required information and justifies the focused fix without a prior issue.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PMd8XS3ByLNi5G9PaNeJo4
@bryanprimus
bryanprimus force-pushed the fix/combobox-search-input-width branch from f87fa37 to 4f3168e Compare October 25, 2026 04:35

maria-rcks commented Oct 30, 2026 •

Copy link
Copy Markdown
Collaborator

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

Verified unchanged head 4f3168e6fdf2179246c8c258698b313416cb33e5 using repo Playwright and /usr/bin/google-chrome on Linux. Ran vp i and background vp run dev separately for github/main (5ef56853ef) and the exact PR head, with only one dev server running at a time. The PR run used explicit isolated --home-dir /home/user/t3code/.t3.

Created a real git repository, added it as a project through the app, and started a thread using Codex gpt-6.1-sol through the local proxy. No mocks, replay provider, fixtures, or demo data.

The shared search-width bug reproduces in the real model picker on main: the input is 239px inside a 336px search row. On this PR it fills all 336px. The matching query below exposes the extra usable width. At 1024px viewport width, the input also matched its row width.

Filtering models, clearing the filter, Escape dismissal, keyboard selection of GPT-6.1-Sol, and subsequent real provider turns worked. The client displayed after selection verified and recorded selection works. Also exercised branch searching, branch creation in the disposable verification repository, and selection of the existing main branch.

Before, main:

main model search leaves unused space

After, PR:

pr model search fills the row

model search keyboard selection and real codex response

Inspected the captures and checked uploaded video playback and seeking in T3's player.

Blacksmith transcript, using the PR parent explicitly because the worker snapshot has shallow history:

vp run check:changed FETCH_HEAD^
check:changed: 1 files since a0e0f8a80ae4
pass format
pass lint
pass knip 1/2
pass knip 2/2
pass typecheck (2 packages)

No source changes were needed.

Not verified

Native Electron, iOS, Android, macOS/Windows rendering, remote/relay/tunnel connections, other providers, dark theme, and every individual shared-component consumer. The original macOS reviewer-placeholder clipping was not reproduced on this Linux VM; the real model picker demonstrated the same underlying shared-component width defect and fix. The reviewer/label picker was not exercised against an external host.

Copy link
Copy Markdown
Member

Thank you, @bryanprimus, for identifying and fixing this! The same combobox search-width fix is now on main in #32926, commit 6417151c09, with your co-author credit. Closing this as covered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS 0-9 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants